Welcome, and thank you for choosing a TommusRhodus theme.
We pride ourselves on providing excellent documentation so this guide will help you get the most from your new theme. We will take you through everything from installing the theme, to creating menus, using the theme options and much more. Please take a moment to read through the articles below to familiarise yourself with your new theme and of course, if you need any assistance along the way, we are always on hand to help.
We also have a number of video tutorials which detail certain aspects of Belton - check out our YouTube playlist here.
This document covers the installation, set up, and use of this theme, and provides answers and solutions to common problems. We encourage you to first read this document thoroughly if you are experiencing any difficulties before contacting our support team.
Uploading Through WordPress
To upload through your Dashboard, select “Appearance” and then “Themes”. Next, select the “Install Themes” tab at the top of the page and then select the “Upload” link, right above the search field. Choose your file and select “Install Now”. Once the theme is fully uploaded and installed, click “Activate” to activate the WordPress theme.
The theme files will be stored on your server in the wp-content/themes location.
When uploading your theme with the installer, please ensure you are uploading the theme .zip file, not the entire package you downloaded. In this case, you will be uploading beltonWPtheme.zip.
FTP Upload
To manually upload your new WordPress theme, login with your credentials to your website and locate the wp-content folder in your WordPress install files. Upload the un-zipped Belton WordPress Theme folder into the: wp-content/themes folder.
Once uploaded, activate the theme by heading to the “Themes” menu in the WordPress Dashboard. Locate the Belton WordPress Theme theme and hit “Activate”.
Looking for a good, free FTP solution - why not try FileZilla or CyberDuck
Installing Theme Plugins
Once the theme is installed, you will see a notice detailing a number of plugins which should be installed. Installing of these items is very simple - just click "Begin Installing Plugins" and on the following screen you can have the theme install and activate all the plugins for you.
Once done you will see a notice informing you the operation is complete.
Importing the Demo Data
Once the plugins have been installed and activated, you are now ready to import the demo data. We use the One Click Demo Data plugin to make the process very easy for you. To begin, head to "Appearance" and then "Import Demo Data" and you will be taken to the import screen. From there hit "Begin Importing Demo Data" and the theme will grab the demo content and set it up for you.
Although we take the greatest care to make the setup process as simple as possible, in some cases (esspecially on budget hosting where resources and at a bare minimum) you may experience an issue during the automatic setup - this section covers an alternative fallback method you can use should the need arise.
Importing The Demo Data Manually
The first thing we need to clarify is setting up manually will mean things like widgets and theme options wont be setup for you - this is unavoidable but it will still give you a great base of all the demo pages ready for you to start building your new site.
To begin, install Attachment Importer - this is a lightweight importing tool for images and will be needed later on to import the demo images/media. Once done, head to Tools > Import and select WordPress to open up WPs built in importing tool (you may need to install it to continue)
Uploading the XML File
Next you will need to locate the themes demo-data.xml file, this will be included in the Demo Data folder in your main download package. Once located select this file and hit "upload". Next you will see a page which will allow you to choose if you wish to assign the demo posts to another user, as well as an option to import all media and attachments - be sure to leave this box unchecked as we will be taking care of this later (and want the import to be as light as possible to be more likley to work)
Once done you will see a notice informing you the operation is complete.
Importing the Images
Now you have the pages imported, its time to tackle the images. If you have not already done so, install and activate Attachment Importer and once done, head to Tools > Import and select the newly added Attachment Import from the list of tools to continue.
Once here, locate the demo XML file and upload - once done hit "Import" and allow the process to take place. Depending on the number of images this process will take some time, so be sure to leave your browser alone whilst its happening (though you can of course open another tab and continue to browse freely)
Final Step
Ok so you now have the pages and images all imported and ready, you now need to simply setup your homepage/blog and menu. To do this head to Settings > Reading to choose your homepage and posts page, and then head to Appearance > Menus to assign the demo menus.
To access the theme options, you may select the Customize button in the admin bar dropdown or select "Customize" from the Dashboard menu. Note that you must be logged in as a site administrator in order to access the controls.
Theme Options
1 - Update Settings
Using your Envato username and API details, you can enable automatic updated for your theme (giving you a simple single-click method for updating your theme, similar to a theme hosted on the wordpress.org repository. For details on setting this up, please see the video guide below.
2 - Site Identity
Here you can specify a site title, tagline and favicon (the small icon shown in your browser window) and more crucially, your own custom logo.
Setting up your own logo is very simple - just use the uploader provided and you can either choose an image from your media library, or upload something fresh, its up to you.
When uploading a logo the ideal size you should aim for is 170px x 60px
3 - Colours
These options give you a range of colour pickers which allow you to tweak the themes colour scheme to suit your tastes. Any changes you make here will be seen live so you can see exactly what each option does as your changing them.
4 - Background Image
Want to use your own image instead of a solid colour? No problem - simply use this option to upload your own image.
5 - Menus & Widgets
Here you can setup and edit your navigation and widgets, however, given the cramped nature of the WP Customizer, we recommend using WP's dedicated page found under the "Appearance" area in your Dashboard, which not olny gives you much more room to work with, but also a simpler interface - but this is of course totally up to you and your preference.
6 - Additional CSS
For those of you our there who want to apply your own custom bespoke styling, our themes provide you with a custom CSS area where you can quickly and easily apply your own custom CSS.
If your looking to make larger changes, or add a LOT of custom code, we highly recommend using a child theme - see below for details on getting this setup
7 - Header Settings
Here you can control the overall header layout you wish to use, as well as setup social profiles, upload your own logo and more
8 - Team Settings
Here you can control the archive layout for your team memebers by choosing from one of our awesome layouts. You can also specify your own custom archive title and set your own background image for this title as you wish.
9 - Blog Settings
Here you can control the archive layout for your blog by choosing from one of our awesome layouts. You can also specify your own custom archive title and set your own background image for this title as you wish.
10 - Portfolio Settings
Here you can control the archive layout for your portfolio items by choosing from one of our awesome layouts. You can also specify your own custom archive title and set your own background image for this title as you wish.
11 - Footer Settings
This is where you can choose your desired footer layout as well as assign your social profile links, and customize your copyright text etc.
Creating menus within WordPress is very simple, and WP gives you a couple of methods to do this. We suggest using the dedicated menu page found under Appearance > Menus, however you are also free to use the menu management system found within the theme customizer/options page (Appearance > Customize)
Creating Menus
Once you’re viewing the Menus, the process of creating a menu is quite easy - essentially you create your menu item from the columns on the left (this can be a link to a post, page or other form of content) or even a custom link using the "Custom Link" menu item, you can see both in the image below. Once you have created your perfect menu, be sure to assign it to the Standard Navigation area and hit save to see it in action.
Creating Dropdown Menus
An important aspect to note when using our theme is the process of creating dropdowns/sub menus is the top level item (the menu item in the main menu area you click/hover to activate the sub-menu) needs to be a "Custom Link" menu item with a URL of just # - this allows the dropdown to work fully on both desktops and mobiles where 'hovering' is not available.
Belton comes with two widgetized areas, the blog sidebar (shown to the side of the main post content within single posts) and the footer, which allows a number of columns of custom widget content for whatever you wish.
There are a couple of ways you can get started with widgets within WP, we recommomend the dedicated admin page found under Appearance > Widgets in your WP dashboard however you can also add/edit widgets to the available widgetized areas via Appearance > Customize however this can be a little cramped with your working with many widgets at once.
Adding Widgets
When you arrive at the Widget admin page, you will be presented with an array of widgets on the left and the widgetized areas on the right, to add a widget to one of the sidebars, simply drag your desired widget over to the sidebar of your choice on the right and your all set. From there simply edit the widget as you wish (depending on the widget your using of course) and your done.
To begin creating posts head to Posts > Add New in your WordPress Dashboard.
The process of creating posts with WordPress is very simple - you need to supply a title for your article, a featured image to represent your blog post throughout your site, and of course the main content itself via WP's post editor.
Featured Image
Upload a featured image - any size will work though we recommend 700 x 420px. The images will be automatically applied throughout all the neccessary templates and loops so be sure to pick the best shot to reprasent your work.
To begin creating your portfolio projects, head to Portfolio > Add New in your WordPress Dashboard.
Creating a project is very similar to a regular WordPress post, in essense you have the regular content area (where you could write a description of your work/your process etc), and gallery area where you can upload the images of your awesome project, and a featured image area (the featured image, much like a regular WP post, used to represent your portfolio item within Portfolio feeds and archive pages/searches etc. We will now detail each area.
Project Orientation
Here you can control the orientation of your portfolio content. You can choose from either a Hero Layout (where there is a large main image on top of the project followed by a series of smaller additional images below) or a Minimal Slideshow Layout, which uses yoru featured content images in a neat slider.
Featured Content Images
This is where you will add your images to the projects by clicking the "Add or Upload Files" button - from there you can either upload fresh images or pick some awesome shots from your exisiting media library. To rearrange the photos, simply drag them into the order you want! Dont for get to update your project once done though.
Using the Hero Layout? Dont forget the additional text displayed next to each image is added via your media library area. Be sure to supply a nice title and caption like you see below for awesome results like you see in the demo.
Additional Details
This is where you you can add your own extra details such as the client name, date of completion and so on - your totally free to use these as you wish. To add an extra detail here, simply fill in the Additional Item Title and Description fields as you wish and your all set. To add more, simply click "Add Another Entry" and repeat as you see fit.
Featured Image
Upload a featured image - any size will work though we recommend 1600 x 1067px. The images will be automatically applied throughout all the neccessary templates and loops so be sure to pick the best shot to reprasent your work.
To begin adding team profiles to your site head to Team Members > Add New in your WordPress Dashboard.
Creating a team memeber profile is very similar to a regular WordPress post, in essense you have the regular content area, a title area (for your members name), a role field and a featured image area (the featured image, much like a regular WP post, used to represent your team memeber item within Team feeds and archive pages/searches etc. We will now detail each area.
Job Role
Here you can specify your team members role within your organisation
Social Profile
This is where you you can add your members social profile links. To do this simply fill in the select the social icon you wish to use and enter a relevant profile URL and your all set. To add more, simply click "Add Another Entry" and repeat as you see fit.
Featured Image
Upload a featured image - any size will work though we recommend 700 x 420px. The images will be automatically applied throughout all the neccessary templates and loops so be sure to pick the best shot to reprasent your team member.
As with any WordPress theme, translation is handled via the provided POT file and is generally quite straightforward - we cover this in detail over in this tutorial - however the whole process can be simplified using an excellent plugin as Loco Translate
If your looking for multilangiage support, we highly recommended WPML
Contact Form 7 is our recommended form plugin for WordPress. It is a simple but powerful form creator for WordPress. Here we will show you how to use Contact Form 7 to create and edit a basic form.
After Contact Form 7 is installed, you’ll find a new menu item in your WordPress admin area called Contact, here is where your forms and created and edited. From the Contact main screen, you will see your first contact form, its usually a default form called 'Contact Form 1' OR if you have imported the demo data for our theme you may see a few forms that we have made specially for you.
When creating and editing forms CF7 uses simple shortcodes (in WordPress these shortcodes are words surrounded by square brackets like “[” and “]”) - these shortcodes are generated via the 'Generate Tag' area (marked in red) and then placed in the form builder area (marked in blue) - you can also add your own HTML to the form for extra control.
The theme uses a small number of special CSS classes which allow you to alter certain elements of the design, such as background colours of sections, text colours etc. These classes are added to the "extra CSS class" field provided within Sections and Column settings like you see below.
white - Add this class to a Section to give it a neat white background colour (the default is dark)
white-text - Add this class to a Section, Row or Columns etc to ensure the text within it is light in colour. This is useful when using a dark colour background or even a dark image and so on.
Creating neat blockquotes
To create neat blockquotes like you see above, use the following markup format and tweak as you wish.
<blockquote>No matter if you're just starting to learn coding, you'll be creating extraordinary HTML sites as if you were a seasoned developer.
<footer>Jim McCarthy, the Owner</footer>
</blockquote>
If your looking to make changes to your theme such as bespoke CSS styling or modifying the loops, page templates or anything on the technical side of things - its important to use a child theme to ensure your modifications are not lost during theme updates. Thankfully, your main download package includes a ready-made child theme to get you started, however if your looking to create your own we recommend using a plugin such as Child Theme Creator by Orbisius which makes the process as simple as just a few clicks.
For more on why usign a child theme is crucial in these situation, check out our blog post for an in depth look.
Each purchase of our themes comes with 6 months of timely, 5 star rated support which you can extend at any time. Our themes do not come with free customization work. There is a very fine line between theme support and customization and whilst we’re happy and ready to help with your theme support questions, we cannot help your modify or extend the theme beyond its advertised features & capabilities.
The information below will help you distinguish and understand the difference between theme support and customizations, if you then need to open a support ticket, a link is given.
Theme Support Examples
“My theme is broken. I’ve followed all the necessary steps to set up the theme, including watching the install video or help documents included with the theme, but still can’t get the theme to work.”
“My theme does not work as advertised. I’ve set it up as directed, but for some reason my theme doesn’t look like it should.”
“My theme has an obvious bug which is preventing me from using the theme properly.”
As you can see, theme support issues interfere with the intended functionality of the theme. These issues prevent the theme from working as advertised and will be supported.
Theme Customization Examples
How do I change an element to look or function differently than shown in the demo?
I would like to add or remove an element from the header, what do I do?
A plugin not recommended/required by the theme on install breaks my theme or causes unexpected behavior.
As you can see, theme customization has to do with preference, rather than actual theme issues. It requires customizing the theme beyond the scope of the theme’s intended style or functionality. These kinds of requests cannot be fulfilled in the support forums unfortunately.
We do offer paid customization services for our theme collection. Visit the Customizations page to get started by posting your project on Codeable.
In a perfect world, every theme would work with every plugin. But for every great plugin out there, you have a poorly coded one. Because of this, we simply can’t support every 3rd party plugin. However, we do try our best to make the themes compatible with all of the popular plugins out there, and it’s a continuing effort.
That being said, we don’t consider non-compatibility with plugins a theme support issue. The theme is only guaranteed to work as shown, with the plugins suggested. If you want to force compatibility, it will be up to you to work out a solution.
WordPress Novices
Everyone is a newbie at WordPress at one point or another. We’ve all struggled through the ins and outs of WordPress and spent many hours hunting down answers on Google and StackExchange.
Unfortunately, our support tickets are not the best place for asking general WordPress questions. We’d happily answer every question you could throw at us, if there was enough time in the day! So we ask that you focus on asking theme-specific questions while seeking help.
Please check out some of the links below to help with your general WordPress questions.
Im seeing a 'stylesheet missing' error when trying to upload the theme
This means your uploading the wrong zip package. When downloading your theme you have the option to download the full package, or the installable theme itself.
We suggest to download the whole package, then unzip this to locate your theme.zip file (theme name will change based on your purchased theme.
Im setting a max_upload_size error when trying to upload the theme
Some hosting, especially budget shared hosting, may impose file restrictions for uploads to your WP site. In some cases, installing this plugin and work very well https://wordpress.org/plugins/increase-upload-max-filesize/ however if it fails to work then you will need to contact your hosts to they can make the necessary changes from there end as this is something we cannot help with from a theme point of view.We suggest
Where is my Visual Composer/Revolution license?
Premium plugins such as Revolution Slider and Visual Composer may request a purchase code during use. This code is used to provide direct updates and support from the plugins creator and as such is not required or supplied for use with our themes. Our frameworks have been carefully create to ensure your running the latest compatible version at all times, so you have no need to worry. Please note that we manually update our bundled plugins after thorough testing as some plugin updates have bugs that we are unhappy to ship to our customers, you will receive updates when we are happy with the plugin. If you truly require auto-updates from these plugins you’ll need to purchase a personal license, please note this is the same for each theme on themeforest that bundles plugins.
Im getting a 404 error when viewing my portfolio/team etc
WordPress is a rock solid platform in most cases, but sometimes, when working with a new theme for instance, it needs a little nudge to update all of its core settings etc. If your seeing a 404 error or such when trying to view your projects (or team members, clients etc - depending on your theme)
To do this, simply head to Settings > Permalinks and select 'postname' from the options listed - even if this option is already selected, hit save anyway (this is the nudge we mentioned earlier) - Once done, you should be able to view all your content with no issues.
Should any issues remain, this indicates an issue with your server (the theme has no control of this) so you will need to contact your hosts for further support.
My site is slow to load, why?
As you saw when viewing the demos of our themes, our themes are capable of being blisteringly fast, however you may ocationally notice your site is not loading as fast as you hoped – here you can find some tips for ensuring your new site loads as quickly as possible http://www.tommusrhodus.com/speeding-up-wordpress/
